{template 'include/header'}
<div class="container container-fill">
<style>
	.brief img{ width:100% !important;}
	.gy_d1{width: 100%;height: 46px;background: #fff;border-bottom: 1px solid #e7e7e7;position: fixed;top: 0;left: 0;z-index: 10;}
	.gy_d1l_img{width: 24px;float: left;margin-top: 11px;}
	.gy_d1l_spn{line-height: 46px;}
	.gy_d1l{width: 23%;float: left;margin-left: 2%}
	.gy_d1c{width: 50%;float: left;text-align: center;line-height: 46px;}
</style>
<style type='text/css'>
	.brief img{ width:100% !important;}
	img.avatar{width:40px!important;border-radius: 50%;}
	#tab{position:relative;height:auto;}
	#tab .tabList {height:50px;}
	#tab .tabList ul{padding-left:0;margin: 0;clear:both;}
	#tab .tabList ul li{float:left;padding: 0;width: 45px;text-align: center;margin-left: -1px;position: relative;cursor: pointer;list-style: none;}
	#tab .tabList ul li.cur:after{ content: "";width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 10px solid #f0efeb;position: absolute;bottom: -12px;left: 20px;z-index: 7;}
	#tab .tabCon{clear: both;border:1px solid #f0efeb;width:100%;height:auto;background-color: #f0efeb;border-radius: 5px;}
	#tab .tabCon div{padding:10px;opacity:0;display: none;height:auto;filter:alpha(opacity=0);}
	#tab .tabList li.cur {border-bottom:none;background:#fff;}
	#tab .tabCon div.cur {opacity:1;display: block;filter:alpha(opacity=100);}
	.right-row {float:right;}
	.right-row span{display: block;width: 20px;height:50px;background: url(<?php echo MODULE_URL;?>template/mobile/img/right_row.png) no-repeat center 10px;background-size: 10px 19px;}
	.respond-list{position: relative;}
	.respond-list:before{content: "";width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-bottom: 10px solid #f0efeb;position: absolute;top: -10px;left: 20px;z-index: 100;}
	.gy_d1{width: 100%;height: 46px;background: #fff;border-bottom: 1px solid #e7e7e7;position: fixed;top: 0;left: 0;z-index: 10;}
	.gy_d1l_img{width: 24px;float: left;margin-top: 11px;}
	.gy_d1l_spn{line-height: 46px;}
	.gy_d1l{width: 23%;float: left;margin-left: 2%}
	.gy_d1c{width: 50%;float: left;text-align: center;line-height: 46px;}
	#hear{width: 100%;height: 44px;line-height: 45px;border-bottom: 1px solid #e7e7e7;padding: 0;background: #fff;margin: 0;position: fixed;top: 46px;left: 0;z-index: 10;}
	#hear a{font-weight: normal;color: black;}
	#hear li{text-align: center;float: left;height: 45px;list-style: none;}
	#hear li:nth-of-type(1){width: 33.33%;float: left;}
	#hear li:nth-of-type(2){width: 33.33%;float: left;}
	#hear li:nth-of-type(3){width: 33.33%;float: right;}
	#hear li:nth-of-type(4){width: 33.33%;float: right;}
	#contentop li{ width: 100%; display: none;margin: 0 auto;}
	#contentop .action{ display: block;}
	.progress-bar-warning {background-color: #43ac43;}
	.i_d_6{height: 90px;}
	.gy_p1{text-align: left;padding:0 3%}
	.gy_d2{padding:0 3%;position: relative;}
	.gy_d2_d1{float: left;width: 20%;vertical-align: middle;}
	.gy_d2_d1 img{width: 50px;height: 50px;border-radius: 100%;border: 2px solid #43ac43;position: absolute;top: 50%;margin-top: -30px;left: 3%;}
	.gy_d2_d2{float: right;width: 80%;text-align: left;}
	.gy_d2_d2_p1 span{font-size: 12px;color: #999;}
	.i_d_5_1_l img{margin-top: 0;}
	.i_d_5_1_l p{margin: 0;}
	.i_d_5_1_r p{margin: 0;}
</style>
<div class="gy_d1">
	<div class="gy_d1l" onClick="javascript:history.back(-1);"><img class="gy_d1l_img" src="<?php echo MODULE_URL;?>/template/mobile/img/gy_l.png"><span class="gy_d1l_spn">返回</span></div>
	<div class="gy_d1c">捐款排行</div>
	<div class="clearfix"></div>
</div>
<div class="detail-main">	
    <ul id="hear">
		<li class="action" style="border-bottom: 2px solid red;height: 43px;"  onclick="load('','fund-sort1')"><a href="javascript:;">总排行</a></li>
		<li><a href="javascript:;" onclick="load('1','fund-sort2')">月排行</a></li>
		<li><a href="javascript:;" onclick="load('2','fund-sort3')">周排行</a></li>
	</ul>
	<div style="height:80px;"></div>
	<ul id="contentop" style="padding:10px 0;background:#fff;">
		<li class="action contentop_li">
			<div class="detail-div ">
		     	<div class="show_div_1" style="margin-bottom:0px; padding:0px 8px 15px 8px;">
		      		<div id="fund-sort1">
		      			<!--list-item-->
		      			{loop $list $row}
		      			<div class='i_d_5'>
						  	<div class='i_d_5_1'>
							    <div class='i_d_5_1_l w70' style="text-align:left;">								
								{if !empty($row['mem_photo'])}		
									{if !empty($row['openid'])}	
										<img src="{$row['mem_photo']}" style="width:45px;border-radius:5px;float:left;margin-right:15px">
									{else}
										<img src="{php echo tomedia($row['mem_photo']);}" style="width:45px;border-radius:5px;float:left;margin-right:15px">
									{/if}	
								{else}
									<img src="{php echo tomedia($set['gy_logo']);}" style="width:45px;border-radius:5px;float:left;margin-right:15px">
								{/if}								
								<p style="line-height:45px;"><?php echo mb_substr($row['mem_name'],0,10,'utf-8')?></p>							    	
							    </div>
							    <div class='i_d_5_1_r w29' style='text-align:right;'>
							     	<p><span style='color:#fe6903; font-size:16px;line-height:46px;'>
											{php echo floor($row['sum']*100)/100;}元
									</span></p>
							    </div>
							    <div class='clear'></div>
						     </div>
						</div>
						{/loop}
		      		</div>
		      		<div class="show-more" style="margin:0 !important; padding:10px  !important; background:#fff;"><a href="javascript:;" onclick="loadPage('1', 'fund-sort1','')" class="btn btn-default btn-block" id="pager" >浏览更多</a></div>
				</div>
			</div>		
		</li>
		<li class="contentop_li">
			<div class="detail-div ">
		     	<div class="show_div_1" style="margin-bottom:0px; padding:0px 8px 15px 8px;">
		      		<div id="fund-sort2">
					
					</div>
					<div class="show-more" style="margin:0 !important; padding:10px  !important; background:#fff;"><a href="javascript:;" onclick="loadPage('1', 'fund-sort2','1')" class="btn btn-default btn-block" id="pager1" >浏览更多</a></div>
				</div>
			</div>		
		</li>
		<li class="contentop_li">
			<div class="detail-div ">
		     	<div class="show_div_1" style="margin-bottom:0px; padding:0px 8px 15px 8px;">
		      		<div id="fund-sort3">
					</div>
					<div class="show-more" style="margin:0 !important; padding:10px  !important; background:#fff;"><a href="javascript:;" onclick="loadPage('1', 'fund-sort3','2')" class="btn btn-default btn-block" id="pager2" >浏览更多</a></div>
				</div>
			</div>
		</li>
	</ul>
	<script>
		$(function(){
			$("#hear li").click(function(){
				$(this).css({
					borderBottom: "2px solid red",
					height:"43px"
				}).siblings().css({
					borderBottom: "none",
					height:"45px"
				});
			});					
			$("#hear li").click(function(){
				$(this).addClass("action").siblings().removeClass("action");
				var index = $(this).index();
				$(".contentop_li").eq(index).css("display","block").siblings().css("display","none");
			});
		});
	</script>	
	<script type="text/javascript">
		function loadPage(pindex, container,px) {
			pindex = parseInt(pindex) + 1;
			$('#pager'+px).html('正在加载数据...');
			$.get("{php echo $this->createMobileUrl('ph',array('flag'=>1));}", {'page' : pindex,'px':px}, function(html){
				if(html!==""){
					$('#'+container).append(html);
					$('#pager'+px).get(0).onclick = function(){
						loadPage(pindex, container,px);
					}
					$('#pager'+px).html("浏览更多");
				}else{ 
					$('#pager'+px).html("已经显示全部");
				}
			});
		}
		function load(index,container) {
			$.get("{php echo $this->createMobileUrl('ph',array('flag'=>1));}", {'px' : index}, function(html){
				$('#'+container).html(html);
			});
		}
	</script>		
</div>   
{template 'include/footer'}
</body>
</html>

